<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实时房态</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <style type="text/css">
        .layui-card-header {
            border-bottom: 0px;
            color: white;
        }

        .layui-card-body p {
            color: white;
        }

        /* 改变下拉框和文本框的行高 */
        .layui-table-cell, .layui-input, .layui-unselect, .layui-select {
            color: #666;
            height: 30px;
            line-height: 30px;
            bottom: 0;
        }

        .floorTop {
            color: #878787;
            height: auto;
            font-size: 40px;
            line-height: 1.4;
            text-align: center
        }

        .roomOne {
            background-color: #6a9eff;
            margin: 5px;
        }

        .roomOne div {
            color: white;
        }

        .roomNum {
            font-size: 30px;
        }

        .roomType {
        }

        .roomStatus {
            font-size: 18px;
        }

        .roomTime {
            font-size: 14px;
        }

        .roomBtn {
            text-align: right;
        }

        .layui-btn + .layui-btn {
            margin-left: 0px;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div id="topInfo" class="layui-row layui-col-space15"></div>
        <!--   主窗口   -->
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12" style="background-color: #fff;">
            <div class="layui-card" style="background-color: #fff;">
                <!-- header头部，显示下拉框 -->
                <div class="layui-card-header">
                    <div class="layui-form">
                        <div class="layui-input-inline" style="width: 120px;">
                            <select class="layui-input-block" id="roomStatus" lay-filter="roomStatus">
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 120px;">
                            <select class="layui-input-block" id="roomType" lay-filter="roomType">
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="dateInfo" autocomplete="off"
                                   placeholder="点击选择日期">
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-sm layuiadmin-btn-role" data-type="add">补充房客信息</button>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-sm layuiadmin-btn-role" data-type="renew">房间续费</button>
                        </div>
                    </div>
                </div>
                <!-- 显示房间信息 -->
                <div class="layui-card-body layuiadmin-card-list" id="mainInfo">

                </div>
            </div>
        </div>
    </div>
</div>
<div id="repeater" style="display: none">
    <button class="layui-btn layuiadmin-btn-role" data-id="" data-type="tabResever"></button>
    <button class="layui-btn layuiadmin-btn-role" data-id="" data-type="tabAdd"></button>
    <button class="layui-btn layuiadmin-btn-role" data-id="" data-type="tabArrive"></button>
    <button class="layui-btn layuiadmin-btn-role" data-id="" data-type="tabChange"></button>
    <button class="layui-btn layuiadmin-btn-role" data-id="" data-type="tabExit"></button>
    <button class="layui-btn layuiadmin-btn-role" data-id="" data-type="tabExpedite"></button>
</div>

<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="../../layuiadmin/layui/layui.js"></script>
<script src="real.js"></script>
<script>
    //页面配置 - 不用填写
    var entityType = "";
    var entityURL = "";
    var entityId = "";
    var nowData;
    var checkDate = dateFormat(new Date());

    function toOrder(id) {
        var tempwindow = window.open('_blank');
        tempwindow.href = "../roomPredictOrder/form.html"
    }


    //事件转发器
    function repeaterClick(evl) {
        var val = $(evl).attr("data-t");
        var id = $(evl).parent().attr("data-id");
        $("#repeater button[data-type='" + val + "']").attr("data-id", id);
        $("#repeater button[data-type='" + val + "']").click();
    }


    //下拉框初始化
    $.ajax({
        url: '/room_status/findRoomInfo',
        type: 'get',
        dataType: 'json',
        data: {"checkDate": $("#dateInfo").val()},
        async: false,
        success: function (data) {
            nowData = data;
            // console.log(data);
            drawTop(data.typeCounts, data.room);
            // drawMain(data.room);
            //将下拉框中添加数据
            var modelList = data.typeCounts;
            if (modelList && modelList.length != 0) {
                var option = "<option value='0'>全部</option>"
                for (var i = 0; i < modelList.length; i++) {
                    option += "<option value=\"" + modelList[i].id + "\"";
                    option += ">" + modelList[i].name + "</option>";  //动态添加数据
                }
                $('#roomStatus').append(option);
            }
            var modelRoomType = data.roomType;
            if (modelRoomType && modelRoomType.length != 0) {
                var option = "<option value='0'>全部</option>"
                for (var i = 0; i < modelRoomType.length; i++) {
                    option += "<option value=\"" + modelRoomType[i].id + "\"";
                    option += ">" + modelRoomType[i].name + "</option>";  //动态添加数据
                }
                $('#roomType').append(option);
            }
            changeSelect()
        }
    })

    function changeSelect() {
        var datas = [];
        var status = $("#roomStatus").val();
        var type = $("#roomType").val();
        //都选中为全部
        if (status == "0" && type == "0") {
            drawMain(nowData.room);
            return;
        }
        if (status == "0") {
            for (var i = 0; i < nowData.room.length; i++) {
                if (nowData.room[i].rtid == type) {
                    datas.push(nowData.room[i]);
                }
            }
        } else {
            for (var i = 0; i < nowData.room.length; i++) {
                if (nowData.room[i].rstid == status) {
                    if (type == "0") {
                        datas.push(nowData.room[i]);
                    } else if (nowData.room[i].rtid == type) {
                        datas.push(nowData.room[i]);
                    }
                }
            }
        }
        drawMain(datas);
    }

    //layui配置
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'useradmin', 'table', 'form', 'element', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table
            , layer = layui.layer
            , element = layui.element
            , laydate = layui.laydate;
        //渲染日期选择器
        //常规用法
        laydate.render({
            elem: '#dateInfo'
            , btns: ['now', 'confirm']
            , value: new Date()
            , min: 0
            , max: 31
            , done: function (value, date, endDate) {
                checkDate = value;
                AutoData();
            }
        });


        //监听房间状态select下拉选中事件
        form.on('select(roomStatus)', function (data) {
            changeSelect()
        });

        //监听房间类型select下拉选中事件
        form.on('select(roomType)', function (data) {
            changeSelect()
        });

        //添加操作，点击添加按钮触发的事件,修改全局变量
        var $ = layui.$, active = {
            add: function () {
                entityURL = "/room_status/supplement";
                layer.open({
                    type: 2
                    , title: "补充房客信息"
                    , content: 'supplement.html'
                    , maxmin: true
                    , area: ['400px', '500px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#entity-submit");
                        submit.click();
                    }
                });
            },
            renew: function () {
                var id = $(this).attr("data-id");
                for (var i = 0, item; i < nowData.room.length; i++) {
                    item = nowData.room[i];
                    if (item.rid == id) {
                        entityId = nowData.room[i];
                    }
                }
                layer.open({
                    type: 2
                    , title: "房间续费"
                    , content: 'renew.html'
                    , maxmin: true
                    , area: ['400px', '500px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#entity-submit");
                        submit.click();
                    }
                });
            },
            tabAdd: function () {
                var layerAdd = layer.open({
                    type: 2
                    , title: false
                    , content: '../roomRealOrder/form.html'
                    , resize: false
                    , scrollbar: false
                    , area: ['850px', '500px']
                    , btn: false
                    , closeBtn: 0

                });
                layer.full(layerAdd);
            },
            tabResever: function () {
                var id = $(this).attr("data-id");
                for (var i = 0, item; i < nowData.room.length; i++) {
                    item = nowData.room[i];
                    if (item.rid == id) {
                        entityId = nowData.room[i];
                    }
                }
                var layerResever = layer.open({
                    type: 2
                    , title: false
                    , content: '../roomPredictOrder/form.html'
                    , resize: false
                    , scrollbar: false
                    , area: ['850px', '500px']
                    , btn: false
                    , closeBtn: 0

                });
                layer.full(layerResever);
            },
            tabExit: function () {

                var id = $(this).attr("data-id");
                var info;
                for (var i = 0, item; i < nowData.room.length; i++) {
                    item = nowData.room[i];
                    if (item.rid == id) {
                        info = nowData.room[i];
                    }
                }
                var layerExit = layer.open({
                    type: 2
                    , title: false
                    , content: 'checkOut.html?id=' + id
                    , resize: false
                    , scrollbar: false
                    , area: ['850px', '500px']
                    , btn: false
                    , closeBtn: 0
                });
                layer.full(layerExit);
            },
            tabExpedite: function () {
                entityURL = "";
                var id = $(this).attr("data-id");
                var layerExpedite = layer.open({
                    type: 2
                    , title: false
                    , content: '../housekeep_order/form.html'
                    , maxmin: false
                    , closeBtn: 0
                    , area: ['400px', '500px']
                    , btn: false
                    , yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#entity-submit");
                        submit.click();
                    }
                });
                layer.full(layerExpedite);
            },
            tabChange: function () {
                var id = $(this).attr("data-id");
                var info;
                for (var i = 0, item; i < nowData.room.length; i++) {
                    item = nowData.room[i];
                    if (item.rid == id) {
                        info = nowData.room[i];
                    }
                }
                layer.open({
                    type: 2
                    , title: "顾客换房"
                    , content: 'change.html?id=' + info.rid
                    , maxmin: true
                    , area: ['400px', '500px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#entity-submit");
                        submit.click();

                    }
                });
            },
            tabArrive: function () {
                var id = $(this).attr("data-id");
                var info;
                for (var i = 0, item; i < nowData.room.length; i++) {
                    item = nowData.room[i];
                    if (item.rid == id) {
                        info = nowData.room[i];
                    }
                }
                layer.open({
                    type: 2
                    , title: "顾客到店"
                    , content: 'arrival.html?id=' + info.rid
                    , maxmin: true
                    , area: ['400px', '500px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#entity-submit");
                        submit.click();
                    }
                });
            }
        }
        //必备
        $('.layui-btn.layuiadmin-btn-role').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>